<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            padding: 0px;
            margin: 0px;
        }
        .demo {
            width: 100px;
            border: 1px solid black;
        }
        ul {
            display: none;
        }
    </style>
</head>
<body>
    <div class="demo">
        <p>Rose</p>
        <ul>
            <li>nba状元秀</li>
            <li>最年轻mvp</li>
            <li>涅槃重生</li>
        </ul>
    </div>

    <script src='./jquery.js'></script>
    <script>
        // show 
        // 
        // $('p').on('mouseenter', function () {
        //     // width height opacity padding margin
        //     $(this).next().show(1000, 'swing');
        // });
        // $('.demo').on('mouseleave', function () {
        //     $('p').next().hide(1000, 'linear');
        // });      
        
        
        // $('p').on('click', function () {
        //     // if ($(this).next().css('display') == 'none') {
        //     //     $(this).next().show();
        //     // }else {
        //     //     $(this).next().hide();
        //     // }

        //      $(this).next().toggle();
        // });




        // fadeIn fadeOut fadeTo fadeToggle 


        // $('p').on('click', function () {
        //     if ($(this).next().css('display') == 'none') {
        //         $(this).next().fadeTo(1500, 0.6, 'swing', function () {
        //             console.log('over1');
        //         });
        //     }else {
        //         $(this).next().fadeTo(1500, 0.1, 'swing', function () {
        //             console.log('over2');
        //         });
        //     }
        //     // $(this).next().fadeToggle(3000);
        // });

        // $('p').on('click', function () {
            // if ($(this).next().css('display') == 'none') {
            //     $(this).next().slideDown(1500, 200,'swing', function () {
            //         console.log('over1');
            //     });
            // }else {
            //     $(this).next().slideUp(1500, 0.5,'swing', function () {
            //         console.log('over2');
            //     });
            // }
            // $(this).next().slideToggle(3000, 50, 'swing', function () {
            //     console.log('over');
            // });
        // });



    </script>
</body>
</html>